<template>
  <div class="statistics-root mc-table">
    <lark-card border :radius="false" :show-title="false" body-width="100%" body-height="30vh">
      <div class="statistics-body">
        <div class="statistics-body-header">
          <div class="statistics-body-header-operation">
            <div class="statistics-body-header-close" @click="closeAction">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </div>

        <div class="statistics-body-list">
          <div class="statistics-body-table">
            <statistics-table v-loading="loading" :headers="headers" :table-data="tableData"></statistics-table>
          </div>
          <div class="statistics-body-pagination">
            <el-pagination
              small
              layout="prev, pager, next"
              :current-page.sync="queryParams.pageNum"
              :page-size="queryParams.pageSize"
              @size-change="getList"
              @current-change="getList"
              :total="total"
            >
            </el-pagination>

          </div>
        </div>
      </div>


    </lark-card>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, computed, watch } from '@vue/composition-api'
  import { Message, MessageBox } from 'element-ui'
  import store from '@/store'
  import router from '@/router'
  import StatisticsTable from '@/views/industry/homePage/statisticsTable'
  import { getHeader, getTable } from '@/api/industry/homePage'

  export default {
    name: 'statistics',
    props: {
      //  查询类型
      queryType: {
        type: String,
        default: ''
      }
    },
    components: { StatisticsTable },
    setup(props, content) {

      let {} = props

      const data = reactive({
        loading: false,
        total: 0,
        tableData: [],
        headers: [],
        queryParams: {
          pageNum: 1,
          pageSize: 5
        }
      })

      const closeAction = () => {
        content.emit('closeSelfAction')
      }

      const getList = async() => {
        data.loading = true
        let { queryParams } = data
        let { queryType } = props

        let headerRes = await getHeader(queryType)
        let tableRes = await getTable(queryType, queryParams)

        data.headers = addWidth(headerRes.data)
        data.tableData = tableRes.rows
        data.total = tableRes.total
        data.loading = false
      }

      const addWidth = header => {
        let { queryType } = props
        let result = []
        switch (queryType) {
          //  资源收集--种子
          case 'collect_germplasm':
            result = header.map(item => {
              let { value } = item
              switch (value) {
                //  采集人
                case 'nickName':
                  item.width = '80px'
                  break
                //  采集编号
                case 'germplasmId':
                  item.width = '80px'
                  break
                //  采集时间
                case 'collectionTime':
                  item.width = '80px'
                  break
                //  采集地点
                case 'location':
                  item.width = ''
                  break
              }
              return item
            })
            break
        }
        return result
      }

      watch(() => props.queryType, val => {
        getList()
      })

      return { ...toRefs(data), closeAction, getList }
    }
  }
</script>

<style scoped lang="scss">
  $header-height: 20px;
  .statistics-root {
    .statistics-body {
      padding: 2px 2px 10px 10px;

      .statistics-body-header {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        height: $header-height;
        border-bottom: 1px solid green;
        margin-bottom: 2px;

        .statistics-body-header-tabs {
        }

        .statistics-body-header-operation {
          display: flex;
          margin-bottom: 20px;
          height: 25px;
        }

        .statistics-body-header-close {
          margin-right: 20px;
          font-size: 20px;
          color: red;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .statistics-body-list {
        .statistics-body-table {
          height: calc(32vh - 79px);
        }

        .statistics-body-pagination {

        }
      }

    }

  }
</style>
